<!doctype html>
<html>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
	<meta name="format-detection" content="telephone=no" />
	<title>速翔网络</title>
	<link rel="stylesheet" type="text/css" href="../c/aui.css" />
	<style>
		body {
			background: #f8f8f8;
			color: #222;
		}

		#sx-header {
			/*background: #fff !important;*/
		}

		.aui-btn img {
			width: 0.75rem;
		}

		.aui-title {
			/*color: #222;*/
		}

		.footer {
			width: 100%;
			display: flex;
			justify-content: center;
			overflow: hidden;
		}

		.footer .tijiao {
			margin: 0.75rem;
			margin-top: 0;
			background: #FE2C55;
			color: #fff;
			border-radius: 0.15rem;
			padding: 0.75rem 0rem;
			font-size: 0.75rem;
			text-align: center;
			width: 100%;
		}

		.info {
			background: #fff;
			margin: 0.75rem 0;
			padding: 0 0.75rem;
		}

		.info div {
			border-top: 1px solid #f3f3f3;
			padding: 0.25rem 0;
			font-size: 0.75rem;
		}

		.info div:first-child {
			border: 0;
		}

		.info div#diqu {}

		.info div#diqu:before {
			content: "\e6f5";
			position: absolute;
			right: 0.75rem;
			top: 0.75rem;
			color: #999
		}

		.info div input {
			height: auto;
			line-height: inherit;
			padding: 0.5rem 0;
		}

		.img_s {
			background: #fff;
			margin-top: 0.75rem;
		}

		.img_s .h4 {
			padding-left: 0.75rem;
			padding-top: 0.75rem;
			font-size: 0.75rem;
		}

		.img {
			padding: 0.75rem;
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.img .r {
			width: 4rem;
			margin-right: 1rem;
		}

		.img .l {
			margin-left: 1rem;
			text-align: center;
		}

		.img .l div {
			color: #f00;
			font-size: 0.65rem;
			color: #999;
			padding-top: 0.5rem;
		}

		.img .l img.shangchuan {
			width: 2rem;
			/*border: 1px solid #515151;*/
			/*padding: 0.5rem;*/
			margin: 0 auto;
			opacity: 0.3
		}

		.img_list {
			margin: 0.75rem 0;
			/*margin-bottom: 5rem;
			padding-bottom: 5rem;*/
			background: #fff;
		}

		.img_list .h4 {
			padding-left: 0.75rem;
			padding-top: 0.75rem;
			font-size: 0.75rem;
		}

		.img_list .list {
			padding: 0.5rem;
			display: flex;
			justify-content: flex-start;
			flex-wrap: wrap;
		}

		.img_list .list div {
			width: 25%;
		}

		.img_list .list div img {
			padding: 0.25rem;
		}

		.img_list .list div img.shangchuan {
			opacity: 0.3;
		}

		.img .r,
		.img_list .list div {
			position: relative;
		}

		.img_list .list div em {
			position: absolute;
			top: 0rem;
			right: 0rem;
			background: #f00 url('../i/x.png');
			background-repeat: no-repeat;
			background-position: center center;
			background-size: 0.5rem;
			width: 1rem;
			height: 1rem;
			border-radius: 50%;
			border: 1px solid #f00;
		}
	</style>
</head>

<body>
	<div class="info">
		<div id="title"><input type="text" placeholder="小店标题" value=""></div>
		<div id="content">
			<textarea placeholder="小店描述"></textarea>
		</div>
		<div id="mobile"><input type="tel" placeholder="手机号码" value=""></div>
	</div>
	<div class="img_s" style="margin-bottom:0.75rem;">
		<div class="h4">小店图标</div>
		<div class="img">
			<div class="r aui-hide">
				<img src="../i/logo.png">
			</div>
			<div class="l" tapmode onclick="img()">
				<img src="../i/shop/shangchuan.png" class="shangchuan">
				<div>上传图片建议400*400尺寸效果更佳</div>
			</div>
		</div>
	</div>
	<div class="footer">
		<div class="tijiao" tapmode onclick="data()">
			申请开通
		</div>
	</div>
</body>
<script type="text/javascript" src="../j/api.js"></script>
<script type="text/javascript">
	var img_data,img_list_data;
	apiready = function() {
		$api.fixTabBar($api.dom('.footer'))
	}
	function data() {
		document.activeElement.blur();
		var data = {};
		data.title = $('#title input').val();
		if (!data.title) {
			return _msg('请填写小店标题');
		}
		data.mobile = $('#mobile input').val();
		if (!data.mobile) {
			return _msg('请填写小店手机号码');
		}
		data.content = $('#content textarea').val();
		if (!data.content) {
			return _msg('请填写小店描述');
		}
		if(!img_data){
			return _msg('请上传小店图标');
		}

		_loading('正在上传图片...');
		// 上传封面图片
		_qiniu(img_data,function(ret,err){
			if (ret.status) {
				console.log(JSON.stringify(ret));
					if (ret.oper == "complete") {
						data.img = ret.info.key
						_add(data);
					}
			}else{
				_loadingCloes();
				console.log(JSON.stringify(err));
				_alert('上传图片失败，请联系客服');
			}
		});
		console.log(JSON.stringify(data));
	}
	function _add(data){
		_ajax('shop/user_add', function(ret, err) {
			_loadingCloes();
			if (ret) {
				if (ret.ret) {
					api.sendEvent({
					    name: 'member_right',
					    extra: {
					        close: true
					    }
					});
					_alert(ret.ret, function(ret, err) {
						_close();
					})
				} else {
					_msg(ret.err)
				}
			} else {
			//	_alert(JSON.stringify(err))
			}
		}, data)
	}

	function img() {
		document.activeElement.blur();
		api.actionSheet({
			title: '上传小店图标',
			cancelTitle: '取消',
			buttons: ['拍照', '相册']
		}, function(ret, err) {
			var index = ret.buttonIndex;
			if (index != 3) {
				var sourceType = index == 1 ? 'camera' : 'album'
				api.getPicture({
					sourceType: sourceType,
					encodingType: 'jpg',
					mediaValue: 'pic',
					destinationType: 'url',
					allowEdit: false,
					quality: 100,
				}, function(ret, err) {
					console.log(JSON.stringify(ret));
					if (ret) {
						if (ret.data) {
							img_data = ret.data;
							$('.img .r img').attr('src', ret.data);
							$('.img .r').removeClass('aui-hide');
						}
					}
				});
			}
		});
	}
</script>

</html>
